<template>
  <div class="news  mt-4 pl-4">
    <ul>
      <li class="item d-flex justify-content-between mb-4" :key="index" v-for="(item,index) in 5">
        <div class="left mr-3">
          <h3>成立</h3>
          <p>2015年</p>
          <span></span>
        </div>
        <div class="right">
          <ul >
            <li class="media" :key="subindex" v-for="(subitem,subindex) in 3">
              <div class="time mr-3">03-21</div>
              <img class="mr-3 w-25" src="../../assets/images/banner-1.jpg">
              <div class="media-body">
                事件事件名称事件事件名称事件事件名称事件事件名称事件事件名称事件事件名称
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

</template>

<script>


  export default {
    computed: {},
    data() {
      return {}
    },
    components: {},
    mounted() {


    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .news {
    ul, li {
      list-style: none;
    }

    .item{
      .left{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        h3{
          background: #F56C6C;
          border: 1px solid #F56C6C;
          .width(80);
          .height(40);
          .line-height(40);
          font-family: MicrosoftYaHeiUI;
          font-size: 18/@size;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
        }
        p{
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #444444;
          letter-spacing: 0;
        }
        span{
          position: relative;
          .width(3);
          height: 100%;
          display: block;
          background: #D3DCE6;
          margin: 0 auto;
        }
      }
      .right{
        background: #F9FAFC;
        .padding(15,15,15,15);
        .time{
          font-family: MicrosoftYaHeiUI-Bold;
          font-size: 16/@size;
          color: #F56C6C;
          letter-spacing: 0;
        }
        .media{
          border-bottom: 1px solid #E5E9F2;
          .padding(0,0,20,0);
        }
        .media-body{
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #222222;
          letter-spacing: 0;
          line-height: 24/@size;
        }
      }
    }

  }


</style>
